<template>
    <div>
        <el-form ref="form" :model="form" label-width="200px" style="width: 500px" >
            <el-form-item label="工程名称">
            <el-input v-model="form.name"></el-input>

  
          </el-form-item>

          <el-form :label-position="labelPosition" label-width="400px" :model="formLabelAlign" >
            <el-form-item label="F—基槽底部宽度（m）" style="width: 600px"  >
                <el-input v-model="form.f"></el-input>
            </el-form-item>
            <el-form-item label="L—基槽计算长度(m)" style="width: 600px">
                <el-input v-model="form.l"></el-input>
            </el-form-item>
            <el-form-item label="H—基槽开挖深度(m)" style="width: 600px">
                <el-input v-model="form.h"></el-input>
            </el-form-item>
            <el-form-item label="K—放坡坡度系数(m)（不放坡可不填）" style="width: 700px">
                <el-input v-model="form.k"></el-input>
                <div>放坡系数可查各类土壤放坡起点及放坡系数表</div>
            </el-form-item>
            <el-form-item label="垫层厚度(m)（无垫层可不填）" style="width: 600px">
                <el-input v-model="form.h1"></el-input>
            </el-form-item>
            



        </el-form>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">立即计算</el-button>
            <el-button type="default"  @click="exit">清空</el-button>
            </el-form-item> 
        </el-form> 

        

       <h2  v-if="form.v>0||form.v1>0||form.v2>0||form.v3>0"  align="center">  
      <div v-if="form.h1==0&&form.k==0">不放坡无垫层基坑方量为<font color="green">{{form.v}}</font>m3</div>
      <div v-if="form.k>0&&form.h1==0">放坡无垫层基坑方量为<font color="green">{{form.v1}}</font>m3</div>
      <div v-if="form.h1>0&&form.k>0">放坡有垫层基坑方量为<font color="green">{{form.v2}}</font>m3</div>
      <div v-if="form.h1>0&&form.k==0">不放坡有垫层基坑方量为<font color="green">{{form.v3}}</font>m3</div>
      <div v-if="form.h1>form.h"><font color="red">垫层厚度不得大于基坑开挖深度</font></div>
      </h2>


      <!-- <h3>
      基坑方量为{{form.v1}}
      </h3>
      <h3>
      基坑方量为{{form.v2}}
      </h3> -->
    </div>
</template>










  <script>
    import sl from '@/api/suanliang'
    export default {
      data() {
        return {
          form: {
              v:0,
              v1:0,
              v2:0,
              v3:0,
              f:'',
              l:'',
              h:'',
              h1:0,
              h2:0,
              k:0,
              name:''
              


            
                                
          },
          input: ''
        }
      },
      created(){
        
          

      },


      methods: {
        onSubmit() {
          sl.addjk(this.form)
              .then(response => {//计算成功
                // this.form.s =response.data.qiangdu.s
                 console.log(response.data.jikeng.f)
                 this.form.v2 =response.data.jikeng.v2
                 this.form.v =response.data.jikeng.v
                 this.form.v1 =response.data.jikeng.v1
                 this.form.v3 =response.data.jikeng.v3
                //提示信息
                this.$message({
                  type: 'success',
                  message: '计算成功!'
                }); 
                

            })
          },
          exit(){
            
            this.form={
              k:0,
              h1:0,
              v:0,
              v1:0,
              v2:0,
              v3:0,
              h2:0
            }
        },
      
    }
        
    }
  
  </script>